<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <link rel="stylesheet" href="./lib/bootstrap-3.3.5-dist/css/bootstrap.min.css">
    <script src="./lib/bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>
    <script src="./lib/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="./css/login.css">
    <link rel="stylesheet" href="./font/iconfont.css">
</head>

<body>
    <div id="back">
        <div class="container">
            <div class="row">
                <div class="col-md-3"></div>
                <div class="col-md-6">
                    <div class="row" id="top">
                        <div class="col-md-5">
                            <img src="./images/logo.png" alt="" id="logo">
                        </div>
                        <div class="col-md-5">
                            <select name="" id="selectId" onchange="Id()">
                                <option value="" style="display: none;">请选择账户</option>
                                <option value="1">个人账号</option>
                                <option value="2">企业账号</option>
                                <option value="3">管理员</option>
                            </select>
                        </div>
                    </div>


                    <div id="form">
                        <h3>密码登录</h3>
                        <div class="green"></div>
                        <div id="zhanghu">
                            <input type="text" placeholder="请输入手机号码" id="username" name="username">
                        </div>
                        <div id="eye">
                            <input type="password" placeholder="请输入密码" name="password" id="password">
                            <div id="div1">
                                <span class="iconfont icon-mimaguan"></span>
                            </div>
                        </div>

                        <button id="login">登录</button>
                        <div>
                            <a href="./html/shouye_qiye.html">游客登录</a>
                            <a href="./html/mimazhaohui.html" id="mima">找回密码</a>
                            <span class="gre">马上注册 <span class="iconfont icon-xiangyoujiantou"></span></span>
                        </div>

                    </div>
                </div>
                <div class="col-md-3"></div>
            </div>
        </div>
    </div>
</body>

</html>
<script>
    //小眼睛的设置，只有当输入框有文字，闭眼睛的小眼睛才会出现，点击小眼睛，闭眼变成睁开眼；
    let a = function () {
        if ($('#eye input').val() == "") {
            $("#div1").css({
                display: "none"
            })
        } else {
            $("#div1").css({
                display: "block"
            })
        }
    }
    $('#eye>input').focus(() => {
        setInterval(a, 1)
    })

    $('#eye>input').focus(function () {
        if ($("#div1>span").attr('class') == 'iconfont icon-mimakai' && $('#eye input').attr('type') == 'text') {
            $("#div1>span").attr('class', 'iconfont icon-mimaguan')
            $('#eye input').attr('type', 'password')
        } else {
            $("#div1>span").attr('class', 'iconfont icon-mimaguan')
            $('#eye input').attr('type', 'password')
        }
    })

    $("#div1").click(function () {
        if ($("#div1>span").attr('class') == 'iconfont icon-mimaguan') {
            $("#div1>span").attr('class', 'iconfont icon-mimakai')
        } else {
            $("#div1>span").attr('class', 'iconfont icon-mimaguan')
        }
    })

    //密码显示与隐藏
    $('#div1').click(function () {
        if ($('#eye input').attr('type') == 'password') {
            $('#eye input').attr('type', 'text')
        } else {

            $('#eye input').attr('type', 'password')
        }
    })

    function Id() {
        let Id = document.getElementById('selectId');
        let identity = Id.value;

        //登陆
        $('#login').click(function () {
            $.ajax({
                url: '/login',
                method: 'post',
                data: {
                    Id: identity,
                    username: $('input[name=username]').val(),
                    password: $('input[name=password]').val()
                },
                success: (res) => {
                    alert(JSON.stringify(res.msg));
                    //将账户id取出来并且存在local Storage 里面
                    let arr = JSON.stringify(res.data)
                    let part = arr.split(',')
                    let arr2 = part[0].split(':');
                    let zhi= parseInt(arr2[1]);
                    console.log(typeof(zhi));  
                    localStorage.setItem('id',zhi)
                    
                    if (res.msg == '登录成功!' && identity == 1) {
                        location.href = './html/shouye_qiye.html'
                    }
                    if (res.msg == '登录成功!' && identity == 2) {
                        location.href = './html/qiyeziliao.html'
                    }
                }
            })
        })

        //点击箭头跳转到注册页面
        $('.gre').click(function () {
            if (identity == 1) {
                location.href = './html/personal-register.html'
            }
            if (identity == 2) {
                location.href = './html/business-register.html'
            }

        })

    }


</script>